iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
JavaScript

30天享用JavaScript概念三明治系列 第 10

Day10:函式

  • 分享至 

  • xImage
  •  
  • 函式的概念 (P2-21)

程式的函式除了跟數學的函式概念相像也能接收一個值做運算後回傳,但它也可以「不讀不回」,不接收、不回傳任何值。

程式的運作環境不像數學都和數字、值的運算結果有關,它依然可以「執行某一個邏輯」而存在。

譬如前端網頁上某個按鈕被使用者點擊後,會觸發某個函式的執行,並更新、變動網頁內容。而這樣的情境就和運算比較沒關係,跟互動、操作比較有關。


  • 函式的宣告

最簡單的方式是透過function讓JavaScript知道要宣告一個函式。和變數一樣,函式在一般情況下也必須有名稱才能讓JavaScript知道想執行哪個函式。也有特定用法不需名稱的匿名函式。

函式執行後回傳的結果透過return決定回傳的內容是什麼。return不一定要存在於函式的內容。

function doubleTheNumber (x) {
    return x * 2;
}
console.log(doubleTheNumber(1)); //2

而當函式裡沒有任何return,或是有return但後面沒有任何要回傳的值,JavaScript會自動將回傳的值設置為undefined,所以可以將一個函式回傳的值當作undefined

function doubleTheNumber (x) {
    console.log(x * 2);
}
console.log(doubleTheNumber(1)); // undefined


  • 函式的執行
    在函式名稱後面加上小括弧()執行,通常以「呼叫」(Invoke)形容執行一個函式動作。

doubleTheNumber (10)

():在函式名稱後面加上小括弧呼叫函式
10:要傳進函式的值(引數)

  • 函式何時結束
    函式被呼叫後,通常會由函式內的第一行執行到最後一行,然後結束。
    但如果遇到第一個return出現在函式內容中間,JavaScipt就會提前結束並回傳return後的數值。

function doubleMe(x){
    return x * 2;
    
    // return 後的任何內容不會被執行
    x = x + 3 // 這行邏輯是多餘的
}
doubleMe(2); // 4


上一篇
Day9:!=反向(NOT)運算子
下一篇
Day11:物件
系列文
30天享用JavaScript概念三明治30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言